<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纯css导航栏下划线跟随效果</title>
    <!-- 参考链接：https://juejin.im/post/5ab9e9056fb9a028be360292?utm_source=gold_browser_extension -->

    <!-- 附加的参考链接：https://codepen.io/thinker_ljn/pen/oqpGQa -->
    <style>
        *{
            margin: 0 auto;
            padding: 0 auto;
        }
        li,ul{
            list-style: none;
        }
        ul{
            margin-top:20px;
            width: 100%;
            overflow: hidden;
        }
        li{
            float: left;
            height: 50px;
            /*box-sizing: border-box;*/
            line-height: 50px;
            padding: 0 15px;
            /*cursor: pointer;*/
            /*margin: 0 10px;*/
            position: relative;
        }
        /*li:hover{
            border-bottom: 2px solid red;
        }*/
        li::before{
            content: "";
            position: absolute;
            /*top: 0;*/
            bottom: 0;
            /*left: 0;*/
            left: 100%;
            /*width: 100%;*/
            width: 0;
            height: 100%;
            border-bottom: 2px solid #000;
            transition: 0.2s all linear;
        }
        li:hover::before{
            left: 0;
            width: 100%;
        }
        li:hover ~ li::before{
            left: 0;
        }
    </style>

</head>
<body>
    <ul>
        <li>不可思议的CSS</li>
        <li>导航栏</li>
        <li>光标小下划线跟随</li>
        <li>PURE CSS</li>
        <li>Nav Underline</li>
    </ul>
</body>
</html>